

import React, { useEffect, useState, useMemo} from 'react';


function TextDance (props){
  const second_text = props.word;
  const [text, setText] = useState("");


  const sum = useMemo(() => {
    return second_text;
  }, [second_text]);

  useEffect(() => {
    if(second_text !== 'Cancelled'){
      const timeout = setTimeout(() => {
          setText(sum.slice(0, text.length + 1));
      }, 200);
      return () => clearTimeout(timeout);
    }else{
      setText(second_text)
    }
  }, [second_text, sum, text]);

  return (
    <p>{text}</p>
  )
}

export default TextDance